import React, { Component, Fragment } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import './style.css';
import logo from './logo.png';
import { Menu, Icon } from 'antd';

class AppHeader extends Component {

    constructor(props) {
        super(props);
        this.state = {
            list: []
            // list: [{
            //     id: 1,
            //     icon: "mail",
            //     title: "VOA慢速英语"
            // },
            // {
            //     id: 2,
            //     icon: "customer-service",
            //     title: "VOA常速英语"
            // },
            // {
            //     id: 3,
            //     icon: "mail",
            //     title: "VOA英语教学"
            // },
            // {
            //     id: 4,
            //     icon: "mail",
            //     title: "VOA慢速英语"
            // },
            // {
            //     id: 5,
            //     icon: "mail",
            //     data: "VOA慢速英语"
            // },
            // {
            //     id: 6,
            //     icon: "mail",
            //     title: "VOA慢速英语"
            // }]
        }
    }

    getMenuItem() {
        return this.state.list.map((item) => {
            return (
                <Menu.Item key={item.id}>
                    <Link to={`/${item.id}`}>
                        <Icon type={item.icon} />{item.title}
                    </Link>
                </Menu.Item>
            )
        }) 
    }

    render() {
        return (
           <Fragment>
                <Link to="/">
                    <img src={logo} className="app-header-logo" alt="logo"/>
                </Link>
                <Menu mode="horizontal" className="app-header-menu">
                    {this.getMenuItem()}
                </Menu>
            </Fragment>  
        )
    }

    componentDidMount() {
        axios.get('http://www.dell-lee.com/react/api/header.json')
            .then(res => {
                // console.log(res.data.data);
                this.setState({
                    list : res.data.data
                })
            })
    }
}

export default AppHeader;